<template>
    <div class="myMusic2">
        <div class="myMusic-title">我喜欢</div>
        <div class="myMusic-nav">
            <div class="myMusic-nav2">
                <div class="myMusic-nav3">
                    <ul>
                        <li>歌曲{{ songs.length }}</li>
                        <li>歌单0</li>
                        <li>专辑0</li>
                        <li>视频0</li>
                    </ul>
                </div>
                <div class="myMusic-nav4">
                    <button>播放全部</button>
                    <button>下载</button>
                </div>
                <div class="myMusic-nav5">
                    <ul>
                        <li>歌曲</li>
                        <li>歌手</li>
                        <li>专辑</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="myMusic-nav6" v-for="(item, index) in songs" :key="index"
            :class="{ 'playingIt': item.id == musicPlay2.id }">
            <ul @click="goToMusic(item.id, index)">
                <li>
                    <svg fill="#000000" height="20px" width="20px" version="1.1" id="Layer_1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"
                        xml:space="preserve" title="Test-Label">
                        <g>
                            <g>
                                <path d="M365.714,3.47c-42.487,0-82.143,18.18-109.714,49.502C228.428,21.65,188.772,3.47,146.286,3.47
			C65.624,3.47,0,69.094,0,149.756c0,33.752,11.776,66.69,33.157,92.744L256,508.53l222.743-265.909l0.1-0.121
			C500.224,216.445,512,183.508,512,149.756C512,69.094,446.376,3.47,365.714,3.47z M454.661,222.553L256,459.713L57.339,222.553
			c-16.762-20.454-25.992-46.303-25.992-72.797c0-63.377,51.562-114.939,114.939-114.939c39.149,0,75.245,19.652,96.558,52.57
			L256,107.708l13.156-20.321c21.313-32.917,57.409-52.57,96.558-52.57c63.377,0,114.939,51.562,114.939,114.939
			C480.653,176.25,471.423,202.099,454.661,222.553z" />
                            </g>
                        </g>
                    </svg>
                    <p class="musicName">
                        {{
                            item.name
                        }}
                    </p>
                    <!-- vip -->
                    <svg width="30px" height="30px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"
                        fill="rgb(255,215,0)" v-if="item.fee !== 0">
                        <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M27 7H5a2 2 0 00-2 2v14a2 2 0 002 2h22a2 2 0 002-2V9a2 2 0 00-2-2z" />
                        <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M7 13l3 6.5 3-6.5M16.5 13v6.5M20.5 17.275h1.48c.651 0 1.277-.275 1.721-.75a2.338 2.338 0 00.215-2.932 1.394 1.394 0 00-1.14-.593H20.5v4.275zm0 0V19.5" />
                    </svg>
                    <!-- mv -->
                    <svg width="30px" height="25px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" v-if="item.mv !== 0" style="cursor: pointer;">
                        <title>MV</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Media" transform="translate(-1296.000000, 0.000000)">
                                <g id="video_line" transform="translate(1296.000000, 0.000000)">
                                    <path
                                        d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z"
                                        id="MingCute" fill-rule="nonzero">

                                    </path>
                                    <path
                                        d="M20,3 C21.0543909,3 21.9181678,3.81587733 21.9945144,4.85073759 L22,5 L22,19 C22,20.0543909 21.18415,20.9181678 20.1492661,20.9945144 L20,21 L4,21 C2.94563773,21 2.08183483,20.18415 2.00548573,19.1492661 L2,19 L2,5 C2,3.94563773 2.81587733,3.08183483 3.85073759,3.00548573 L4,3 L20,3 Z M20,5 L4,5 L4,19 L20,19 L20,5 Z M10.3401,7.63805 L10.8575504,7.86889348 L10.8575504,7.86889348 L11.1960712,8.02822616 L11.1960712,8.02822616 L11.5825514,8.21728108 L11.5825514,8.21728108 L12.013063,8.43639444 L12.013063,8.43639444 L12.4836776,8.68590248 L12.4836776,8.68590248 L12.9904672,8.9661414 C13.0777284,9.01542747 13.1663333,9.066008 13.2562,9.11789 L13.7742856,9.42346743 L13.7742856,9.42346743 L14.2484637,9.71485401 L14.2484637,9.71485401 L14.677056,9.98847112 L14.677056,9.98847112 L15.0583843,10.2407402 L15.0583843,10.2407402 L15.5380856,10.571288 L15.5380856,10.571288 L15.902003,10.8336731 C15.935796,10.8585928 15.96734,10.8820267 15.9966,10.9039 C16.6579,11.3984 16.6608,12.3871 15.9967,12.8836 L15.6744408,13.1191056 L15.6744408,13.1191056 L15.2346104,13.4265488 L15.2346104,13.4265488 L14.8783152,13.6659106 L14.8783152,13.6659106 L14.4731296,13.9288963 L14.4731296,13.9288963 L14.0203992,14.2121664 L14.0203992,14.2121664 L13.5214693,14.5123816 L13.5214693,14.5123816 L12.9874248,14.8206985 L12.9874248,14.8206985 L12.4781584,15.1025544 L12.4781584,15.1025544 L12.006637,15.3529074 L12.006637,15.3529074 L11.5764206,15.5722595 L11.5764206,15.5722595 L11.1910688,15.7611128 L11.1910688,15.7611128 L10.5691987,16.049331 L10.5691987,16.049331 L10.3398,16.1497 L10.3398,16.1497 C9.57694,16.477 8.72176,15.9789 8.62504,15.1583 L8.56657325,14.5938157 L8.56657325,14.5938157 L8.53543872,14.2204376 L8.53543872,14.2204376 L8.49269968,13.5560264 L8.49269968,13.5560264 L8.47013582,13.0484883 L8.47013582,13.0484883 L8.45494461,12.4932445 C8.45315235,12.3969176 8.4517612,12.2987448 8.45081811,12.1987971 L8.44938,11.8937 C8.44938,11.6869133 8.45135902,11.486937 8.45494172,11.2943382 L8.47012548,10.7392416 L8.47012548,10.7392416 L8.4926792,10.2318136 L8.4926792,10.2318136 L8.52035079,9.77545763 L8.52035079,9.77545763 L8.55088815,9.37357704 L8.55088815,9.37357704 L8.62499,8.62954 L8.62499,8.62954 C8.72188,7.80738 9.57864,7.31137 10.3401,7.63805 Z M10.9512364,10.1390647 L10.5151,9.92064 L10.5151,9.92064 L10.486244,10.4084653 L10.486244,10.4084653 L10.4638603,10.9594743 L10.4638603,10.9594743 L10.4511397,11.5687494 C10.450002,11.6748776 10.4494,11.7832286 10.4494,11.8937 L10.4511341,12.2185227 L10.4511341,12.2185227 L10.463821,12.8275589 C10.466828,12.9243493 10.4702373,13.018714 10.4739831,13.1105513 L10.4999679,13.6304324 C10.5047959,13.7117531 10.5098286,13.7903429 10.515,13.8661 L10.9492239,13.6480901 L10.9492239,13.6480901 L11.4363178,13.392184 L11.4363178,13.392184 L11.9712577,13.0977099 C12.0641224,13.0453796 12.1587714,12.9914143 12.2551,12.9358 L12.8059822,12.6101644 L12.8059822,12.6101644 L13.30037,12.3044216 L13.30037,12.3044216 L13.7363321,12.0232315 C13.8040163,11.9786714 13.8691857,11.9353286 13.9318,11.8933 L13.5245411,11.6247834 L13.5245411,11.6247834 L13.0588636,11.3300487 C12.8118306,11.1769735 12.5438143,11.0159714 12.2562,10.8499 L11.9734778,10.6886806 L11.9734778,10.6886806 L11.4392283,10.3949308 L11.4392283,10.3949308 L10.9512364,10.1390647 L10.9512364,10.1390647 Z"
                                        id="形状" fill="#09244B">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </svg>
                </li>
                <li>
                    <p>
                        {{
                            item.ar[0].name
                        }}
                    </p>
                </li>
                <li>
                    <p>
                        {{
                            item.al.name
                        }}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { ref, watch, reactive, onMounted, nextTick, computed, onBeforeUpdate } from "vue"
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user';
import { getMusic } from '@/stores/getMusic';
import { musicPlay2, } from '@/utils/playMusic'
import { GetAllDetailMusics, PlayList } from '@/models/musciLists';

const getMusic2 = getMusic()
const user2 = getMusic()
const route = useRoute()
let loading = ref<Boolean>(true)
let songs = ref<GetAllDetailMusics[]>([])

const getData = async () => {
    var lists = reactive<PlayList>(getMusic2.playlist[0])
    await user2.getDetailMusicLists(Number(lists.id))
    loading.value = true
    // songs =computed(() => user2.allMusics)
    songs.value = user2.allMusics
}

const goToMusic = async (id: number, index: number) => {
    let data = await musicPlay2.getMusicUrl(id, index)
    if (data == false) {
        return ElMessage({
            message: '网络问题,获取音乐失败',
            type: 'warning',
        })
    }
}

onMounted(async () => {
    await nextTick()
    await getData()
})




</script>

<style lang="scss" scoped></style>